<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>山水图片展示样式</title>

    <link href="css/demo.css" rel="stylesheet" />
    <link href="css/ionicons.min.css" rel="stylesheet" />
    <link href="css/flutter.css" rel="stylesheet" />
</head>

<body>
    <section>
        <div class="flutter-container">
            <div class="col-flut-2">
                <figure class="Flutters flutEffect_1">
                    <img src="images/10.jpg" alt="sample7" />
                    <div class="overlay">
                        <a href="#lightbox-1"><i></i></a>
                        <a href="#lightbox-1"><i></i></a>
                        <a href="#lightbox-1"><i></i></a>
                    </div>
                </figure>
                <div class="flutter-lightbox" id="lightbox-1">
                    <a href="#" class="close-me"></a>
                    <img src="images/01.jpg" alt="sample7" />
                </div>
            </div>

            <div class="col-flut-2">
                <figure class="Flutters flutEffect_2">
                    <img src="images/12.jpg" alt="sample7" />
                    <div class="overlay">
                        <a href="#lightbox-2"><i></i></a>
                    </div>
                </figure>
                <div class="flutter-lightbox" id="lightbox-2">
                    <a href="#" class="close-me"></a>
                    <img class="flutter-full-img" src="images/02.jpg" alt="sample7" />
                </div>
            </div>

            <div class="col-flut-2">
                <figure class="Flutters flutEffect_3">
                    <img src="images/11.jpg" alt="sample7" />
                    <div class="overlay">
                        <a href="#lightbox-3"><i></i></a>
                    </div>
                </figure>
                <div class="flutter-lightbox" id="lightbox-3">
                    <a href="#" class="close-me"></a>
                    <div class="flutter-full-content">
                        <h2></h2>
                        <p>

                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="flutter-container">
            <div class="col-flut-2">
                <figure class="Flutters flutEffect_4">
                    <img src="images/17.jpg" alt="sample7" />
                    <div class="overlay">
                        <h2><span></span></h2>
                        <p></p>
                        <a href="#"></a>
                    </div>
                </figure>
            </div>

            <div class="col-flut-2">
                <figure class="Flutters flutEffect_5">
                    <img src="images/09.jpg" alt="sample7" />
                    <div class="overlay">
                        <h2><span></span> </h2>
                        <p></p>
                        <a href="#"></a>
                    </div>
                </figure>
            </div>
            <div class="col-flut-2">
                <figure class="Flutters flutEffect_6">
                    <img src="images/08.jpg" alt="sample7" />
                    <figcaption>
                        <h2> <span></span> </h2>
                        <p></p>
                        <a href="#"></a>
                    </figcaption>
                </figure>
            </div>
        </div>
    </section>

    <section>
        <div class="flutter-container">
            <div class="col-flut-2">
                <figure class="Flutters flutEffect_7">
                    <img src="images/02.jpg" alt="sample7" />
                    <figcaption>
                        <div class="overlay">
                            <h2>坚持走 <span>绿色发展之路</h2>
            </div>
            <div class="overlay">
              <p>共筑生态文明之基</p>
            </div>
            <a href="#"></a>
          </figcaption>
        </figure>
      </div>
      <div class="col-flut-2">
        <figure class="Flutters flutEffect_8">
          <img src="images/04.jpg" alt="sample7" />
          <figcaption>
            <div class="overlay">
              <h2>
                <span></span> <span></span>
                            </h2>
                        </div>
                        <div class="overlay">
                            <p>乡村美景</p>
                        </div>
                        <a href="#"></a>
                    </figcaption>
                </figure>
            </div>

            <div class="col-flut-2">
                <figure class="Flutters flutEffect_9">
                    <img src="images/13.jpg" alt="sample7" />
                    <figcaption>
                        <div class="overlay">
                            <a href="#lightbox-9"><i></i></a>
                            <a href="#lightbox-9"><i></i></a>
                            <a href="#lightbox-9"><i></i></a>
                        </div>
                        <h2>
                            坚持走绿色发展之路， <span>共筑生态文明之基</span>
                        </h2>
                    </figcaption>
                </figure>
                <div class="flutter-lightbox" id="lightbox-9">
                    <a href="#" class="close-me"></a>
                    <div class="flutter-small-content">
                        <h2></h2>
                        <p>

                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="flutter-container">
            <div class="col-flut-2">
                <figure class="Flutters flutEffect_10">
                    <img src="images/11.jpg" alt="sample7" />
                    <figcaption>
                        <div class="overlay">
                            <a href="#"><i>三</i></a>
                            <a href="#"><i>板</i></a>
                            <a href="#"><i>河</i></a>
                        </div>
                        <h2>岭南风情 <span>水乡</span> 文化</h2>
                    </figcaption>
                </figure>
            </div>

            <div class="col-flut-2">
                <figure class="Flutters flutEffect_11">
                    <img src="images/03.jpg" alt="sample7" />
                    <figcaption>
                        <div class="overlay">
                            <h3>Where?</h3>
                        </div>
                        <div class="overlay">
                            <div class="icons">
                                <a href="#"><i>成</i></a>
                                <a href="#"><i>太</i></a>
                                <a href="#lightbox-4"><i>广场</i></a>
                            </div>
                        </div>
                    </figcaption>
                    <div class="center">
                        <i>成</i>
                    </div>
                </figure>
                <div class="flutter-lightbox" id="lightbox-4">
                    <a href="#" class="close-me"></a>
                    <iframe src="images/13.jpg" width="100%" height="100%" frameborder="0" style="border: 0" allowfullscreen></iframe>
                </div>
            </div>

            <div class="col-flut-2">
                <figure class="Flutters flutEffect_12">
                    <img src="images/01.jpg" alt="sample7" />
                    <figcaption>
                        <div class="overlay">
                            <img src="images/01.jpg" alt="sample7" />
                        </div>
                        <h2><span>缓缓流淌的三板河穿村而过</span></h2>
                    </figcaption>
                    <a href="#"></a>
                </figure>
            </div>
        </div>
    </section>
</body>

</html>